<template>
	<view class="newService">
		<!-- tab栏 -->
		<view class="tab_box flex-r-a-c">
			<view class="tab_item flex-c-c-c" :class="item.id == tabCurrent ? 'active' : ''"
				v-for="(item,index) in tabList" :key="index" :data-index="index" :data-tabCurrent="item.id"
				:data-tabType="item.type" @tap="tabChange">
				{{item.name}}
			</view>
		</view>
		<!-- 内容区 -->
		<view class="service_box flex-r-s-s">
			<!-- 左边选择栏 -->
			<scroll-view scroll-y="true" style="width: 30%;">
				<view class="service_l">
					<view class="list" :class="item.id == leftTabCurrent ? 'active' : ''"
						v-for="(item,index) in leftTabList" :key="index" @tap.stop="leftTabChange(item.id)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容栏 -->
			<scroll-view scroll-y="true" style="width: 70%; box-sizing: border-box; padding: 0rpx 20rpx;"
				@scrolltolower="bottomOut">
				<view class="service_r">
					<!-- 搜索框 -->
					<!-- <view class="search_box">
						<view v-if="isSearchInput" class="inputBox flex-r-c-c"
							style="width: 100%; height: 100%; background-color: #FFFFFF; border-radius: 12rpx;"
							@tap="isSearchInput = false">
							<image src="../../../static/mine/ssfdj.png" style="width: 28rpx; height: 28rpx;"
								mode="widthFix">
							</image>
							<view
								style="color: #999999; font-size: 24rpx; font-weight: 500; letter-spacing: 8rpx; margin-left: 10rpx;">
								搜索</view>
						</view>
						<u-search v-else v-model="searchInput" :focus="isSearchInput == false ? 'true' : 'false' "
							:show-action="false" placeholder="搜索" shape="square" bg-color="#FFF" height="80"
							@search="page = 1;searchBtn()" @blur="page = 1;searchBtn()"></u-search>
					</view> -->
					<!-- 内容列表 -->
					<view class="list_box">
						<!--  -->
						<!-- 列表 -->
						<view class="list" @tap.stop="goDetails" v-for="(item,index) in shopList" :key="index"
							:data-id="item.id">
							<view class="list_t flex-r-b-c">
								<image :src="url + item.image" style="border-radius: 12rpx;" mode=""></image>
								<view
									style="width: 90rpx; height: 34rpx; line-height: 34rpx; border-radius: 20rpx; background-color: #ffffffa0; color: #FF6C1D; font-size: 26rpx; font-weight: 500; text-align: center; position: absolute; top: 10rpx; left: 10rpx;">
									{{item.use_name}}
								</view>
								<view class="list_c flex-c-c-s" style="position: relative;">
									<view class="name one-line-ellipsis" style="width: 100%;">{{item.name}}</view>
									<view class="introduce one-line-ellipsis" style="width: 100%;">{{item.describe}}
									</view>
									<view class="list_m flex-r-c-c">
										<view class="money flex-r-s-c">¥<text>{{item.price}}</text></view>
										<view class="moneyH flex-r-s-c" v-if="item.orginal_price != 0">
											原价<text>¥{{item.orginal_price}}</text></view>
										<image v-if="item.snum == 0" src="../../../static/icon/fwtj.png"
											style="width: 40rpx; height: 40rpx; position: absolute; right: 10rpx; bottom: 6rpx;"
											@tap.stop="addShopCart" mode="widthFix" :data-id="item.id"></image>
									</view>
								</view>
							</view>
							<view class="list_b flex-r-b-e" v-if="item.snum != 0">
								<view class="">可享用{{item.snum}}次</view>
								<image src="../../../static/icon/fwtj.png" @tap.stop="addShopCart" mode="widthFix"
									:data-id="item.id"></image>
							</view>
							<view style="position: relative; width: 100%; height: 72rpx;z-index: 99;"
								v-if="item.estimate_price != undefined">
								<view
									style="width: 100%; height: 100%; background: linear-gradient(180deg, #FEF9F1 0%, #EABE70 100%); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); border-radius: 0px 0px 6px 6px; font-size: 24rpx; font-weight: 500; opacity: 0.1;">
								</view>
								<image
									style="position: absolute; top: 50%; left: 20rpx; transform: translateY(-50%); width: 36rpx; height: 36rpx; opacity: 1;"
									src="/static/icon/icon-sy@3x.png" mode="widthFix"></image>
								<view
									style="position: absolute; top: 50%; left: 66rpx; transform: translateY(-50%); color: #EEC379; opacity: 1;">
									预计收益{{item.estimate_price}}元</view>
							</view>
						</view>
						<!-- 提示 -->
						<view class="text"
							style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold; margin-top: 30rpx; padding-bottom: 30rpx;">
							{{titleText}}
						</view>
					</view>
				</view>
			</scroll-view>

		</view>



		<!-- 付款栏 -->
		<view class="cart_box flex-r-b-c">
			<view class="icon" @tap.stop="getCartList(true,false)">
				<!-- <u-icon name="shopping-cart" color="#0F4C3A" size="60"></u-icon> -->
				<image style="width: 60rpx; height: 58rpx;" src="../../../static/icon/shoping.png" mode="widthFix">
				</image>
				<view class="redDot" v-if="shopRedDotNum > 0">{{shopRedDotNum}}</view>
			</view>
			<button class="paymentBtn" v-if=" phone == '' " :open-type=" isUserInfo ? getPhoneNumber : '' "
				@getphonenumber="getPhoneNumber" @tap.stop="isUser">付款</button>
			<view class="paymentBtn" v-else @tap.stop="paymentBtn">付款</view>
		</view>
		<view class="safe-paddings"
			style="position: fixed;bottom: 0;left: 0;z-index: 999;width: 750rpx;background-color: #FFFFFF;"></view>



		<!-- 弹框购物车 -->
		<u-popup v-model="isShow" height="50vh" :closeable="true" :customStyle="{bottom:'114rpx'}" border-radius="14"
			mode="bottom">
			<view style="padding: 30rpx;">
				<view class="name">已选服务</view>
				<scroll-view scroll-y="true" style="height: 50vh; margin-top: 40rpx;padding-bottom: 50rpx;">

					<view class="popup_list flex-r-b-c" v-for="(item,index) in cartList" :key="index">
						<image :src="url + item.image" mode=""></image>
						<view class="popup_list_r">

							<view class="list_r_t flex-r-b-c">
								<view class="name">{{item.name}}</view>
								<view class="time" v-if="item.sminute != null">约{{item.sminute}}分钟</view>
							</view>

							<view class="list_r_b flex-r-b-c">
								<view class="popup_price">¥<text>{{item.price}}</text></view>

								<view class="popup_quantity flex-r-b-c">
									<view class="reduce text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="deleteCart(item.id,item.spe_id,item.num)">-
									</view>
									<input type="number" disabled class="quantity" :value="item.num" />
									<view class="plus text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="addCart(item.id,item.spe_id,item.num)">
										+</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>




		<!-- 多规格弹框 -->
		<u-popup v-model="isDGGShow" height="50vh" :closeable="true" :customStyle="{bottom:'114rpx'}" border-radius="14"
			mode="bottom" @close="DGGPopupDlose">
			<view style="padding: 30rpx;">
				<view class="name">已选服务</view>
				<scroll-view scroll-y="true" style="height: 50vh; margin-top: 40rpx;padding-bottom: 50rpx;">

					<view class="popup_list flex-r-b-c" v-for="(item,index) in DGGList" :key="index">
						<image :src="url + item.image" mode=""></image>
						<view class="popup_list_r">

							<view class="list_r_t flex-r-b-c">
								<view class="name">{{item.name}}</view>
								<view class="time" v-if="item.sminute != null">约{{item.sminute}}分钟</view>
							</view>

							<view class="list_r_b flex-r-b-c">
								<view class="popup_price">¥<text>{{item.price}}</text></view>

								<view class="popup_quantity flex-r-b-c">
									<view class="reduce text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="DGGdeleteCart(item.goods_id,item.id,item.num)">
										-
									</view>
									<input type="number" disabled class="quantityNum" :value="item.num" />
									<view class="plus text" style="box-sizing: border-box; padding: 16rpx;"
										@tap.stop="DGGaddCart(item.goods_id,item.id,item.num)">
										+</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.$base.smallimgUrl,
				shopRedDotNum: 0, // 购物车红点提示
				tabCurrent: 1, // tab 下标
				leftTabCurrent: 1, // 左边 tab 下标
				tabType: 2, // 商品的类型 2: 服务商品， 1: 普通商品
				searchInput: '', // 搜索框
				isShow: false, // 购物车弹框显示
				// tab 栏数据
				tabList: [],
				// 左边 tab 栏数据
				leftTabList: [],
				page: 1, // 页码
				shopList: [], // 商品列表
				titleText: '', // 上拉提示
				cartList: [], // 购物车列表
				isSearch: true, // 阻止搜索的多次请求
				phone: '',
				isSearchInput: true,
				isClick: true,
				isUserInfo: !uni.getStorageSync('user_info'),
				isDGGShow: false, // 多规格显示
				DGGList: [], // 多规格数据
				store_id: null, //店铺id
			}
		},
		onLoad() {
			this.getTabData() // 获取 tab 数据
		},
		onShow() {
			// 引用tabbar的页面隐藏自带tabbar,不改变四个tabbar的权重
			uni.hideTabBar()
			if (uni.getStorageSync('user_info')) {
				this.getCartList(false, false)
				this.getSingleData('mobile')
			}
		},
		methods: {
			// 列表下拉触底加载
			bottomOut() {
				let that = this
				if (that.titleText == '') {
					that.page = that.page + 1
					that.searchInput == '' ? that.getServiceShopList() : that.searchBtn()
				}
			},
			// 点击付款判读是否登录
			isUser() {
				if (!uni.getStorageSync('user_info')) {
					uni.navigateTo({
						url: '/mine/login/login'
					})
				}
			},
			// 获取手机号
			getSingleData(v) {
				let that = this
				that.$api.getSingle_data({
					name: v
				}).then(res => {
					console.log(res)
					that.phone = res.data.data
				})
			},
			// 获取手机号
			getPhoneNumber(e) {
				let that = this
				var data = {}
				uni.checkSession({
					success(res) {
						console.log(res)
						if (res.errMsg == 'checkSession:ok') {
							data = {
								sessionKey: uni.getStorageSync('user_info').data.sessionKey,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}
							that.$api.getPhone(data).then(res => {
								console.log(res)
								that.phone = res.data
								uni.showToast({
									title: '手机号已获取，请再次点击购买',
									icon: 'none'
								})
							})
						} else {
							uni.login({
								success(res) {
									data = {
										code: res.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv
									}
									that.$api.getPhone(data).then(res => {
										console.log(res)
										that.phone = res.data
										uni.showToast({
											title: '手机号已获取，请再次点击购买',
											icon: 'none'
										})
									})
								}
							})
						}
					}
				})

			},
			// 获取 tab 数据
			getTabData() {
				let that = this
				that.$api.tabData_list().then(res => {
					console.log(res)
					that.tabCurrent = res.data.data[0].id
					that.tabType = res.data.data[0].type
					that.leftTabList = res.data.data[0].cgoods
					that.leftTabCurrent = res.data.data[0].cgoods[0].id
					that.tabList = res.data.data
					// 获取商品列表
					that.getServiceShopList()
				})
			},
			// 获取商品列表
			getServiceShopList() {
				let that = this
				if (that.isClick == false) {
					return
				}
				that.$api.serviceShop_list({
					category_id: that.tabCurrent,
					cid: that.leftTabCurrent,
					page: that.page,
					store_id: uni.getStorageSync('store_dz').id
				}).then(res => {
					console.log(res)
					that.isClick = true
					that.titleText = res.data.data.data.length == 0 ? '没有商品了' : ''
					that.shopList = that.shopList.concat(res.data.data.data)
					that.phone = res.data.data.phone
				})
			},
			// tab 切换
			tabChange(e) {
				this.page = 1
				this.searchInput = ''
				this.shopList = []
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.leftTabList = this.tabList[e.currentTarget.dataset.index].cgoods
				this.leftTabCurrent = this.tabList[e.currentTarget.dataset.index].cgoods[0].id
				this.tabType = e.currentTarget.dataset.tabtype == 2 ? 2 : 1
				this.getServiceShopList()
				this.isClick = false
			},
			// 左边 tab 切换
			leftTabChange(id) {
				this.page = 1
				this.shopList = []
				this.leftTabCurrent = id
				this.getServiceShopList()
			},
			// 点击添加购物车
			addShopCart(e) {
				let id = e.currentTarget.dataset.id
				let that = this
				that.$api.getSpe({
					id: id
				}).then(res => {
					console.log(res)
					if (res.data.data.length == 0) {
						this.$api.add_cart({
							id: id
						}).then(res => {
							console.log(res)
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							this.getCartList(false, false)
						})
					} else {
						that.DGGList = res.data.data
						that.isDGGShow = true
					}
				})
			},
			// 多规格弹框关闭
			DGGPopupDlose() {
				let that = this
				that.DGGList.filter(e => {
					e.num = 0
				})
			},
			// 多规格删除
			DGGdeleteCart(goodID, spe_id, num) {
				let that = this
				let is = null
				that.DGGList.filter(e => {
					if (e.goods_id == goodID && e.id == spe_id) {
						e.num == 0 ? e.num = 0 : e.num--
					}
				})
				num == 1 ? is = true : is = false
				num--
				that.getAdd(true, goodID, spe_id, num, is)
			},
			// 多规格添加
			DGGaddCart(goodID, spe_id, num) {
				let that = this
				that.DGGList.filter(e => {
					console.log(e)
					if (e.goods_id == goodID && e.id == spe_id) {
						e.num++
					}
				})
				that.getAdd(true, goodID, spe_id)
			},
			// 购物车中的 添加
			addCart(goodID, spe_id, num) {
				console.log(goodID, spe_id, num)
				let that = this
				let isDGG = false
				if (spe_id == undefined) {
					that.cartList.filter(e => {
						if (e.id == goodID) {
							e.num++
						}
					})
				} else {
					that.cartList.filter(e => {
						if (e.id == goodID && e.spe_id == spe_id) {
							e.num++
						}
					})
				}

				that.getAdd(false, goodID, spe_id)
			},
			// 购物车中的 删除
			deleteCart(goodID, spe_id, num) {
				let that = this
				let is = false,
					isDGG = false
				if (spe_id == undefined) {
					that.cartList.filter(e => {
						if (e.id == goodID) {
							e.num == 0 ? e.num = 0 : e.num--
						}
					})
				} else {
					that.cartList.filter(e => {
						if (e.id == goodID && e.spe_id == spe_id) {
							e.num == 0 ? e.num = 0 : e.num--
						}
					})
				}
				num == 1 ? is = true : is = false
				num--
				that.getAdd(false, goodID, spe_id, num, is)
			},
			// 点击获取购物车列表
			getCartList(el, le) {
				let that = this
				that.isShow = el
				that.isDGGShow = le
				that.$api.cart_list().then(res => {
					console.log(res)
					that.cartList = res.data.data
					var num = 0
					res.data.data.map(e => num += e.num)
					that.shopRedDotNum = num
				})
			},
			// 点击跳转详情
			goDetails(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/order/activityDetails/activityDetails?id=' + id + '&type=1'
				})
			},
			// 点击搜索
			// searchBtn() {
			// 	let that = this
			// 	if (that.isSearch) {
			// 		that.isSearch = false // 防止多次请求
			// 		if (that.page <= 1) {
			// 			that.shopList = []
			// 		}
			// 		that.$api.serviceShop_list({
			// 			category_id: that.tabCurrent,
			// 			page: that.page,
			// 			seach: that.searchInput
			// 		}).then(res => {
			// 			console.log(res)
			// 			that.titleText = res.data.data.data.length == 0 ? '没有商品了' : ''
			// 			that.shopList = that.shopList.concat(res.data.data.data)
			// 			that.isSearch = true
			// 			that.isSearchInput = true
			// 		})
			// 	}
			// },
			// 点击付款
			paymentBtn() {
				let data = []
				if (this.cartList.length == 0) {
					uni.showToast({
						title: '请先购买商品',
						icon: 'none'
					})
					return
				}
				this.cartList.forEach((e) => {
					console.log(e)
					data.push({
						id: e.id,
						spe_id: e.spe_id,
						num: e.num
					})
				})
				uni.navigateTo({
					url: '/order/orderConfirm/orderConfirm?goods=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			// 添加的方法
			getAdd(isDGG, goodID, id, num, is) {
				console.log(isDGG, goodID, id, num, is)
				this.$api.add_cart({
					id: goodID,
					spe_id: id,
					num: Number(num)
				}).then(res => {
					console.log(res)
					if (num) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					} else if (is) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					} else {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						isDGG == true ? this.getCartList(false, isDGG) : this.getCartList(true, isDGG)
					}
				})
			},
		}

	}
</script>

<style lang="less">
	.newService {
		background-color: #F5F5F5;

		// 顶部 tab 
		.tab_box {
			width: 100vw;
			height: 88rpx;
			background-color: #FFFFFF;

			.tab_item {
				font-size: 34rpx;
				position: relative;
			}

			.active {
				color: #557E6F;
				position: relative;
				height: 88rpx;

				&::after {
					width: 134rpx;
					height: 10rpx;
					content: '';
					background-color: #557E6F;
					border-radius: 30rpx;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
				}

			}

		}

		// 内容区
		.service_box {
			width: 100vw;
			margin-top: 20rpx;

			// 左边选择栏
			.service_l {
				height: calc(100vh - 88rpx - constant(safe-area-inset-bottom) - 134rpx);
				height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 134rpx);
				background-color: #FFFFFF;

				.list {
					width: 100%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					color: #ACACAC;
					background-color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 500;
				}

				.active {
					background-color: #557E6F;
					color: #FFFFFF;
				}
			}

			// 右边内容栏
			.service_r {
				height: calc(100vh - 88rpx - constant(safe-area-inset-bottom) - 154rpx);
				height: calc(100vh - 88rpx - env(safe-area-inset-bottom) - 154rpx);

				// 搜索框
				.search_box {
					width: 100%;
					height: 80rpx;
				}

				// 内容列表
				.list_box {
					width: 100%;

					.list {
						width: 100%;
						height: auto;
						background-color: #FFFFFF;
						border-radius: 20rpx;
						box-sizing: border-box;
						padding: 20rpx;
						margin-top: 20rpx;

						.list_t {
							position: relative;

							image {
								width: 200rpx;
								height: 200rpx;
							}

							.list_c {
								width: 50%;

								.name {
									color: #313131;
									font-size: 28rpx;
									font-weight: bold;
								}

								.introduce {
									margin-top: 20rpx;
									font-size: 22rpx;
									font-weight: 500;
									color: #777777;
								}

								.list_m {
									margin-top: 20rpx;

									.money {
										color: #FF6C1D;
										font-size: 20rpx;

										text {
											font-size: 36rpx;
										}
									}

									.moneyH {
										margin-left: 6rpx;
										color: #C3C3C3;
										font-size: 20rpx;
										font-weight: 500;

										text {
											font-size: 28rpx;
											text-decoration: line-through;
										}
									}
								}
							}
						}

						.list_b {
							margin-top: 10rpx;

							image {
								margin-left: 20rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}


		// 付款栏
		.cart_box {
			width: 100vw;
			height: calc(constant(safe-area-inset-bottom) + 114rpx);
			height: calc(env(safe-area-inset-bottom) + 114rpx);
			box-sizing: border-box;
			padding: 0rpx 40rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0rpx;
			z-index: 99999;

			.icon {
				position: relative;

				.redDot {
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 50%;
					font-size: 20rpx;
					background-color: red;
					color: #FFFFFF;
					position: absolute;
					top: -2rpx;
					right: -8rpx;
				}
			}

			button {
				margin: 0;
			}

			.paymentBtn {
				width: 228rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 42rpx;
				color: #fff;
				font-size: 32rpx;
				letter-spacing: 8rpx;
				background-color: #45806E;
			}
		}


		// 多规格/购物车 弹框
		.popup_list {
			margin-bottom: 30rpx;

			image {
				width: 140rpx;
				height: 140rpx;
			}

			.popup_list_r {
				width: 75%;
				box-sizing: border-box;
				padding-right: 40rpx;

				.list_r_t {
					.name {
						font-size: 36rpx;
						color: #4B4B4B;
						font-weight: 500;
					}

					.time {
						font-size: 22rpx;
						color: #555555;
						font-weight: 300;
					}
				}

				.list_r_b {
					margin-top: 40rpx;

					.popup_price {
						color: #FF6C1D;
						font-size: 32rpx;

						text {
							font-size: 40rpx;
							display: inline-block;
						}
					}

					.popup_quantity {
						.text {
							font-size: 40rpx;
						}

						input {
							width: 100rpx;
							text-align: center;
							background-color: #F2F2F2;
							font-size: 36rpx;
							margin: 0rpx 20rpx;
						}
					}
				}
			}
		}

	}
</style>